<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
        <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" +request.getServerPort() + path + "/";
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script language="javascript" type="text/javascript" src="<%=basePath %>/js/My97DatePicker/WdatePicker.js"></script>
<link rel="stylesheet" href="<%=basePath %>/css/bootstrap.min.css">
<script type="text/javascript" src="<%=basePath %>/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/bootstrap.min.js"></script>
<script src="<%=basePath %>/laypage/laypage.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/vue.min.js"></script>
<style type="text/css">
#div1{
margin: 20px;
}
img{
width: 100%;
margin-bottom: 10px;
}
a{
color: black;
}
#button{
float: right;
margin-right: 50px;

}
 #tr2{
height: 250px;
} 
.th1{
width: 30%;
}
.tr1{
height: 60px;
}
#td1{
text-align: center;
}
.span1{
font-size:25px;
font-weight: bold;
color: red;

}
</style>
</head>
<body>
<div id="div1"><a href="../index.jsp">交流论坛</a> 》<a href="topic.jsp">发帖管理</a> 》查看主贴</div>
<!-- Unnamed (水平线) -->
      <img id="u6_line" class="img " src="<%=basePath %>/img/u199_line.png"/>
      <button type="button" class="btn btn-primary"  data-toggle="button" id="button" onclick="getBack()">返回</button>  
      <div id="divtable">
	<div class="container" >
	<h2>查看主贴</h2>              
<p>{{datas1.ptmain}} 主帖浏览   浏览 【<span class="span1">{{datas1.lookcount}}</span> 】 次 :</p>   
               
	<table class="table table-bordered" >
		<thead >
			<tr>
				<th>发布时间</th>
				<td>{{datas1.posted}}</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>作者</th>
				<td>{{datas1.author_id}}</td>
				
			</tr>
		 	<tr>
				<th>来源</th>
				<td>{{datas1.source}}</td>
			</tr> 
			<tr class="tr1">
				<td colspan=2 >{{datas1.content}}</td>
			</tr> 
		</tbody>
	</table>
	
	
	
	<div v-for="(index,list) in datas">
	
	<p> 帖子回复浏览   浏览 【<span class="span1">{{list.lookcount}}</span> 】 次 :</p>   
	<p> {{list.rtname}} 回复 ：{{datas1.ptmain}} <span class="span1">{{index+1}}</span>楼</p>                 
	<table class="table table-bordered" >
		<thead >
			<tr>
				<th>发布时间</th>
				<td>{{list.rtdate}}</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>作者</th>
				<td>{{list.rtname}}</td>
				
			</tr>
			<tr class="tr1">
				<td colspan=2 >{{list.rtcontent}}</td>
			</tr> 
		</tbody>
	</table>
</div>
</div>
<div id="laypage"></div>
<div class="container">
	<h3>回复帖子</h3>        
	<table class="table table-bordered">
		<thead>
			<tr>
				<td colspan=2><span style="margin-left: 40px;">回复主题:</span>
				<input type="hidden" id="ptid" name="ptid" value="${ptid}">
				<input type="text" class="form-control" id="rttheme"  name="rttheme" style="width: 800px; float: right; " > 
				</td>
			</tr>
		</thead>
		<tbody>
	
			<tr id="tr2">
				<td colspan=2 >
					<span style="margin-left: 40px;">回复内容：</span><textarea cols="110" rows="11" name="rtcontent" id="rtcontent" placeholder="请输入回复内容" style="margin-left: 40px;"></textarea><br>
			</td>	
			</tr>
			<tr >
				<td colspan=2 id="td1">
					 <button type="button" class="btn btn-success" v-on:click="addPost()">提交</button>
			</td>	
			</tr>
		</tbody>
	</table>
</div>
</div> 
</body>
<script type="text/javascript">
function getBack() {
	window.location.href="Template/topic.jsp"
}

//定义Vue组件,
   var exm=new Vue({
	el:"#divtable",
	data:{
		curr:'1',
		datas:[],
		datas1:[], 
		
	},
	
	
	methods:{
		 //帖子的详细信息  表格
		lookpost:function(){
			 var ptid=$("#ptid").val();
			 var dom = this;
			 var currentPage=this.curr;
			
		$.ajax({
			url:'<%=basePath %>/lookPost1',
			type:'post',
			data:{ptid:ptid,currentPage:currentPage},
			dataType:'json', 
			success:function(res){
			
				console.log(res.lookPost)
				dom.datas1=res.lookMainPost
				 dom.datas=res.lookPost 
			
				 console.log(dom.datas1) ;
				  laypage({
					    cont: $("#laypage"),
					    pages:12,  //假设我们获取到的是18（后端计算完总页数后将总页数值传过来，放在这里即可（类似{$totalpage}））.
					    groups:5, //显示几页码 
					    skip: true, //是否开启跳页
					    skin: '#AF0000',
					    curr:currentPage,  //假设我们获取到的是18（后端计算完总页数后将总页数值传过来，放在这里即可（类似{$totalpage}））.
					    groups:3, //显示几页码currentPage,		
					    jump: function(obj, first){ //触发分页后的回调
					        if(!first){ 	//一定要加此判断，否则初始时会无限刷新      
					        	dom.curr=(obj.curr);
					        	dom.lookpost();
					        }
					    }
					});    
			}
		})		
		},	
	
		//新增回复帖子
		addPost:function(){
			var reowner=$("#ptid").val();
			var rttheme=$("#rttheme").val();
			var rtcontent=$("#rtcontent").val();

			var dom=this;
			$.ajax({
				url:'<%=basePath %>/addReplyPost',
				type:'post',
				data:{reowner:reowner,rttheme:rttheme,rtcontent:rtcontent},
				dataType:'json',
				success:function(res){
					dom.lookpost();
				}
			})
		}

	},
	 created:function(){
		this.lookpost();
	
	} 
}) 
 
</script>
</html>